<template>
    <div class="container">
        <div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="密码" style="margin-top: 30px;">
                    <el-input v-model="form.pas" type="password" style="border: none;"></el-input>
                </el-form-item>

                <el-form-item label="验证码" style="margin-top: 30px;position: relative;">
                    <el-input v-model="form.yan" style="border: none;"></el-input>
                    <div style=" width: 70px; text-align: center; position: absolute; top: 0px; right: 0px;">
                        {{ randomNumber }}</div>
                </el-form-item>

                <el-form-item style="margin-top: 40px; ">
                    <el-button style="width: 80%; height: 40px;" type="primary" @click="but">登录</el-button>

                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            randomNumber: this.generateRandomNumber(),
            form: {
                name: '37669620 ',
                pas: '24265141ehjd@~',
                yan: ''
            },

        }
    },
    mounted() {

    },
    methods: {
        generateRandomNumber() {
            return Math.floor(1000 + Math.random() * 9000);
        },
        but() {
            if (this.form.yan == this.randomNumber) {
                this.$router.push({
                    name: "anquan",
                });
            } else {
                this.$message.error('验证码错误');
                this.form.yan = ''
                this.generateRandomNumber()

            }

        }
    },
}
</script>
<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/login.png');
    position: relative;

    >div:nth-child(1) {
        width: 27%;
        height: 63%;
        position: absolute;
        top: 32%;
        left: 36%;
        background-color: white;
        padding: 100px 30px;
        box-shadow: 3px 2px 2px 1px #b4b1b1;
    }
}
</style>
